<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>机器账单管理</title>
    <link rel="stylesheet" href="/static/lib/layui-v2.5.6/layui-v2.5.6/layui/css/layui.css">
    <style>
        .layui-table-cell{
            height:36px;
            line-height: 36px;
        }
        .layui-col-xs1{
            height: 66px;
            line-height: 66px;
            margin: 5px 5px 0 0;
            text-align: center;
            font-size: 20px;
            cursor: pointer;
        }
        .info{
            font-size: 14px;
            color: rgb(110, 108, 108);
            line-height: 36px;
        }
        .layui-icon-search{
            font-size: 30px;
            color: #009688;
            cursor: pointer;
            margin-left: 40px;
        }
        .layui-icon{
            cursor: pointer;
        }
        
    </style>
</head>
<body>
    <table id="demo" lay-filter="test"></table>


<!-- 订单详细页面 -->
    <div id="orderDetails" style="display: none;">
        <div class="layui-form-item">
            <label class="layui-form-label">订单号</label>
            <div class="layui-input-block id_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block userid_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">买家编号</label>
            <div class="layui-input-block buyerid_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">订单时间</label>
            <div class="layui-input-block createdate_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">订单状态</label>
            <div class="layui-input-block orderstatus_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">付款方式</label>
            <div class="layui-input-block paymethod_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">付款订单</label>
              <div class="layui-input-inline payorderid_info1 info"></div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">付款时间</label>
              <div class="layui-input-inline paydate_info1 info"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">机器ID</label>
              <div class="layui-input-inline machineid_info1 info"></div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">机器位置</label>
              <div class="layui-input-inline containeplace_info1 info"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">订单总价</label>
            <div class="layui-input-block amount_info1 info"></div>
        </div>

        <table class="layui-table" lay-skin="line">
            <thead>
                <tr>
                  <th>商品名称</th>
                  <th>商品类型</th>
                  <th>商品单价</th>
                  <th>商品数量</th>
                </tr> 
            </thead>
            <tbody id="commodities_info1"></tbody>
        </table>

    </div>




    <script type="text/html" id="barDemo">
        <i class="layui-icon layui-icon-tabs" lay-event="orderDetails_1" title="订单详情"></i>
    </script>

    <script type="text/html" id="toolbarDemo">
        
        <div class="layui-inline" style="width: 150px;">
            <select name="payMethod_2" lay-verify="" id="payMethod_2">
                <option value="" id="payMethod_2_2">付款方式</option>
                <option value="0">支付宝</option>
                <option value="1">微信</option>
                <option value="2">账号余额</option>
            </select>
        </div>
        <div class="layui-inline" style="width: 150px;">
            <select name="status_2" lay-verify="" id="status_2">
                <option value="" id="status_2_2">订单状态</option>
                <option value="0">未付款</option>
                <option value="1">订单完成</option>
            </select>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline" style="width: 200px;">
              <input type="text" name="trade_no_2" id="trade_no_2" placeholder="输入订单编号" autocomplete="off" class="layui-input">
            </div>
        </div>
        
        
            <div class="layui-inline">
              <div class="layui-input-inline" style="width: 120px;">
                <input type="text" name="start_2" id="start_2" placeholder="订单起始时间" autocomplete="off" class="layui-input">
              </div>
              -
              <div class="layui-input-inline" style="width: 120px;">
                <input type="text" name="end_2" id="end_2" placeholder="订单结束时间" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
                <i class="layui-icon layui-icon-search" lay-event="getOrderListSearch_2" title="搜索刷新"></i>
            </div>
            
        <div class="layui-form-item" style="margin-top:10px">
            <button class="layui-btn" lay-event="deleteAll">删除所选订单</button>
        </div>
    </script>


    
   
    <script src="/static/lib/layui-v2.5.6/layui-v2.5.6/layui/layui.js"></script>
    <script>
        
        
        
        

        layui.use(['table','laydate','form','util','layer'], function(){
            var $ = layui.jquery;
            var table = layui.table;
            var laydate =layui.laydate;
            var util = layui.util;
            var layer = layui.layer;

            table.render({
                elem: '#demo',
                height: 'full-60',
                method: 'post',
                                //TODO:
                url: '/admin/order/query/page', //数据接口
                page: {layout: ['prev', 'page', 'next', 'skip', 'count']}, //开启分页
                toolbar: '#toolbarDemo',
                defaultToolbar: [],
                id: 'adTest',
                cols: [[ //表头
                {type:'checkbox'},
                // {field: 'user_id', title: '用户ID', width:'15%', sort: true, fixed: 'left'},
                {field: 'id', title: '订单号', width:'20%',},
                {field: 'createDate', title: '订单时间', templet:"<div>{{layui.util.toDateString(Number(d.createDate), 'yyyy.MM.dd HH:mm:ss')}}</div>", width:'15%', sort: true},
                {field: 'place', title: '机器位置'} ,
                {field: 'payMethod', title: '付款方式', templet:'<div>{{paymethodfun(d.payMethod)}}</div>', width: '15%'},
                {field: 'orderStatus', title: '订单状态', width: '10%', templet:'<div>{{orderstatusfun(d.orderStatus)}}</div>', sort: true},
                {field: 'amount', title: '订单金额', width: '10%', sort: true},
                {fixed: 'right', title: '操作', width:'5%', align:'center', toolbar: '#barDemo'}
                ]],


                parseData: function(res){ //res 即为原始返回的数据
                    return {
                    "code": res.success, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.list //解析数据列表
                    };
                },
                request: {
                    pageName: 'page', //页码的参数名称，默认：page
                    // limitName: 'pageSize' //每页数据量的参数名，默认：limit
                },
                response: {
                    // statusName: 'success', //规定数据状态的字段名称，默认：code
                    statusCode: true //规定成功的状态码，默认：0
                }
            });
            laydate.render({
                elem: '#start_2',
                format: 'yyyy/MM/dd',
            });
            laydate.render({
                elem: '#end_2',
                format: 'yyyy/MM/dd'
            });
        
            table.on('toolbar(test)', function(obj){
                sessionStorage.setItem("orderControllerpayMethod_2_1", $("#payMethod_2").val());
                sessionStorage.setItem("orderControllerstatus_2_1", $("#status_2").val());
                sessionStorage.setItem("orderControllertrade_no_2_1", $("#trade_no_2").val());
                sessionStorage.setItem("orderControllercreatedateStart_2_1", $("#start_2").val());
                sessionStorage.setItem("orderControllercreatedateEnd_2_1", $("#end_2").val());
                //搜索栏的实现
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'getOrderListSearch_2':
                    
                    var trade_no = $("#trade_no_2").val() || undefined
                    
                    table.reload('adTest', {
                        where: { //设定异步数据接口的额外参数，任意设
                            payMethod: $("#payMethod_2 option:selected").attr('value'),
                            orderStatus: $("#status_2 option:selected").attr('value'),
                            
                            trade_no: trade_no,
                            start: dateTime($("#start_2").val()),
                            end: dateTime($("#end_2").val()),
                        },
                        page: {
                            curr: 1 //重新从第 1 页开始
                        },
                        done: function(res, curr, count){
                            this.where={};
                        }
                    });
                    
                    laydate.render({
                        elem: '#start_2',
                        format: 'yyyy/MM/dd',
                    });
                    laydate.render({
                        elem: '#end_2',
                        format: 'yyyy/MM/dd'
                    });

                    // $("#payMethod_2 option[value= payMethod_2_1 ]").attr("selected","selected");
                    if (sessionStorage.getItem("orderControllerpayMethod_2_1") == '') {
                        $("#payMethod_2_2").attr('text','付款方式')
                    }else if(sessionStorage.getItem("orderControllerpayMethod_2_1") == '0'){
                        $("#payMethod_2 option[value= '0']").attr("selected", true);
                    }else if (sessionStorage.getItem("orderControllerpayMethod_2_1") == '1') {
                        $("#payMethod_2 option[value= '1']").attr("selected", true);
                    }else if (sessionStorage.getItem("orderControllerpayMethod_2_1") == '2') {
                        $("#payMethod_2 option[value= '2']").attr("selected", true);
                    }

                    if (sessionStorage.getItem("orderControllerstatus_2_1") == '') {
                        $("#status_2").attr('text','订单状态')
                    }else if(sessionStorage.getItem("orderControllerstatus_2_1") == '0'){
                        $("#status_2 option[value= '0']").attr("selected", true);
                    }else if (sessionStorage.getItem("orderControllerstatus_2_1") == '1') {
                        $("#status_2 option[value= '1']").attr("selected", true);
                    // }else if (sessionStorage.getItem("orderControllerstatus_2_1") == '2') {
                    //     $("#status_2 option[value= '2']").attr("selected", true);
                    // }else if (sessionStorage.getItem("orderControllerstatus_2_1") == '3') {
                    //     $("#status_2 option[value= '3']").attr("selected", true);
                    }

                    if (sessionStorage.getItem("orderControllertrade_no_2_1") == '') {
                        $("#trade_no_2").attr('placeholder','输入订单编号')
                    }else{
                        $("#trade_no_2").attr('placeholder',sessionStorage.getItem("orderControllertrade_no_2_1"))
                    }
                    
                    if (sessionStorage.getItem("orderControllercreatedateStart_2_1") == '') {
                        $("#start_2").attr('placeholder','订单起始时间')
                    }else{
                        $("#start_2").attr('value',sessionStorage.getItem("orderControllercreatedateStart_2_1"))
                    }
                    if (sessionStorage.getItem("orderControllercreatedateEnd_2_1") == '') {
                        $("#end_2").attr('placeholder','订单结束时间')
                    }else{
                        $("#end_2").attr('value',sessionStorage.getItem("orderControllercreatedateEnd_2_1"))
                    }
                    
                    break;
                    case 'deleteAll':
                        var data = checkStatus.data;
                        if (data.length == 0) {
                            layer.msg('请选择要删除的账单')
                        }else{
                        var orderids = data[0].id
                            for (let i = 1; i < data.length; i++) {
                                var orderids1 = "," + data[i].id
                                orderids += orderids1
                            }
                            layer.confirm('确定要删除订单？', function(index2){
                                $.ajax({
                                    type: "post",
                                        //TODO:
                                    url: "/admin/order/delAll",
                                    data: {ids: orderids},
                                    dataType: "json",
                                    success: function(mag){
                                        layer.msg(mag.message)
                                        table.reload('adTest')
                                        laydate.render({
                                            elem: '#start_2',
                                            format: 'yyyy/MM/dd',
                                        });
                                        laydate.render({
                                            elem: '#end_2',
                                            format: 'yyyy/MM/dd'
                                        });
                                    },
                                    error: function(mag){
                                        layer.msg('删除失败')
                                    }
                                })
                            })
                        }
                    break;
                };
            });

            table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                if(layEvent === 'orderDetails_1'){
                    $.ajax({
                                //TODO:
                        url: "/admin/order/detail/" + data.id,
                        
                        dataType: "json",
                        async: false,
                        success: function(mag){
                            $(".id_info1").html('<span style="color: #f173e1;">'+mag.data.id+'</span>')
                            $(".userid_info1").html(mag.data.userId)
                            $(".buyerid_info1").html(status(mag.data.buyerId))
                            $(".createdate_info1").html(ctime(mag.data.createDate))
                            $(".orderstatus_info1").html(orderstatusfun(mag.data.orderStatus))
                            $(".machineid_info1").html(mag.data.machineId)
                            $(".containeplace_info1").html(status(mag.data.place))
                            $(".amount_info1").html('<span style="color: #f173e1;">'+mag.data.amount+'</span>')
                            $(".paymethod_info1").html(paymethodfun(mag.data.payMethod))
                            // $(".payorderid_info1").html(status(mag.data.userId))
                            $(".paydate_info1").html(ctime(mag.data.payDate))
                            var commodities = mag.data.commoditySold
                            if (commodities != '' && commodities != null && commodities != undefined&& commodities != []) {
                                var flag = ''
                                for (var i = 0; i < commodities.length; i++) {
                                    var flag1 = '<tr><td>'+ commodities[i].commodityName +'</td><td>'+ commodities[i].category +'</td><td>'+ commodities[i].price +'</td><td>'+ commodities[i].count +'</td></tr>' 
                                    flag += flag1
                                }
                                
                                $("#commodities_info1").html(flag)
                            }  
                        }
                    })
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['66%', '90%'], //宽高
                        title: '账单详细',
                        btn: ['删除'],
                        content: $('#orderDetails'),
                        btn1:function(index){
                            layer.confirm('确定要删除订单？', function(index2){
                                $.ajax({
                                    type: "post",
                                            //TODO:
                                    url: "/admin/order/delete",
                                    data: {orderId: data.id},
                                    dataType: "json",
                                    success: function(mag){
                                        if (mag.success == true) {
                                            layer.msg(mag.message)
                                            table.reload('adTest')
                                            laydate.render({
                                                elem: '#start_2',
                                                format: 'yyyy/MM/dd',
                                            });
                                            laydate.render({
                                                elem: '#end_2',
                                                format: 'yyyy/MM/dd'
                                            });
                                            layer.close(index);
                                        }else{
                                            layer.msg(mag.message)
                                        }
                                    },
                                    error:function(){
                                        layer.msg('操作失败,请重新登录操作')
                                    }
                                })
                            })
                        return false
                        },
                    });

                }
            });
        });

        function dateTime(date) {
            if (date != '') {
                var dateTime = new Date(date).getTime()
            }else{
                var dateTime = ''
            }
            return dateTime
        }
        function ctime(num) {
            if (num == null) {
                var ctime = '订单未完成'
            }else {
                var ctime = layui.util.toDateString(Number(num), "yyyy.MM.dd HH:mm:ss")
            }
            return ctime
        }
        function status(num) {
            if(num == null) {
                var status = '订单未完成'
            }else {
                var status = num
            }
            return status
        }
        function orderstatusfun(num) {
            if (num == 0) {
                var orderstatus = '未付款'
            }else if (num == 1) {
                var orderstatus = '订单完成'
            }
            return orderstatus
        }
        function paymethodfun(num) {
            if (num == '0') {
                var paymethod = '支付宝'
            }else if (num == '1'){
                var paymethod = '微信'
            }else if (num == '2'){
                var paymethod = '账户余额'
            }else if (num == null){
                var paymethod = '订单未完成'
            }else {
                var paymethod = '其他支付方式'
            }
            return paymethod
        }
        
    </script>
</body>
</html>